<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MINESWEEPER</title>
    <h1>MINESWEEPER</h1>
    <link rel="stylesheet" href="./mine sweeper.css">
</head>
<body>
    <div id="modal" class="hidden">
        <div class="modal-box">
            <p class="msg">You lose !</p><br>
            <p class="play">REPLAY</p>
        </div>
    </div>
    <section>
        <div class="controllers">
            <span class="start">start</span>
            <span class="mode click" data-limit="10">easy</span>
            <img class="emoji" src="png/label-04.png" alt="emoji">
            <span class="time">0</span>
            <img class="clock" src="png/label-02.png" alt="clock">
        </div>
        <table class="mine-body">
        </table>
    </section>
    <footer>
        <br>
        <p>Created by <a href="https://gitee.com/fantasticmomo" target="_blank">FantasticMomo</a></p>
    </footer>

    <script>
        let timer
    </script>
    <script src="utils.js"></script>
    <script src="create.js"></script>
    <script>
        const bindStart = () => {
            let start = e('.start')
            bindEvent(start, 'click', function (event) {
                let self = event.target
                if (!self.classList.contains('click')) {
                    self.classList.add('click')
                }
                resetGame()
            })
            bindMode()
        }

        const resetGame = () => {
            let start = e('.start')
            if (!start.classList.contains('click')) {
                start.classList.add('click')
            }
            let modal = e('#modal')
            modal.classList.add('hidden')
            let cells = es('.cell')
            for (let cell of cells) {
                cell.classList.remove('opened')
                cell.classList.remove('space')
                cell.classList.remove('bomb')
                cell.classList.remove('flag')
                let container = cell.parentElement.parentElement
                container.classList.remove('gameover')
                let emoji = e('.emoji')
                emoji.src = "png/label-04.png"
            }
            let square = createSquare()
            renderSquare(square)
            bindEventDelegate(square)
            setTime()
        }

        const setTime = () => {
            let count = 0
            let time = e('.time')
            clearInterval(timer)
            timer = setInterval(function() {
                count++
                time.innerHTML = `${dealTime(count)}`
            }, 1000);
        }

        const bindMode = () => {
            let mode = e('.mode')
            bindEvent(mode, 'click', function () {
                if (mode.dataset.limit === '10') {
                    mode.dataset.limit = '20'
                    mode.innerHTML = 'hard'
                } else if (mode.dataset.limit === '20') {
                    mode.dataset.limit = '10'
                    mode.innerHTML = 'easy'
                }
                let start = e('.start')
                if (start.classList.contains('click')) {
                    resetGame()
                }
            })
        }

        const bindFlag = () => {
            document.oncontextmenu = function(e){
                return false
            }
            bindAll('.cell', 'mouseup', function (event) {
                let self = event.target
                if (event.button === 2) {
                    if (!self.classList.contains('opened')) {
                        if (!self.classList.contains('flag')) {
                            self.classList.add('flag')
                        } else {
                            self.classList.remove('flag')
                        }
                    }
                }
            })
        }

        const decision = () => {
            let cells = es('.cell')
            let openCell = 0
            for (let cell of cells) {
                if (cell.classList.contains('bomb')) {
                    let emoji = e('.emoji')
                    emoji.src = "png/label-06.png"
                    let msg = e('.msg')
                    msg.innerHTML = 'You lose !'
                    myAlert()
                } else if (cell.dataset.number !== "9" && cell.classList.contains('opened')) {
                    openCell += 1
                }
            }
            let mode = e('.mode')
            let endNum = 81 - Number(mode.dataset.limit)
            if (openCell >= endNum) {
                let emoji = e('.emoji')
                emoji.src = "png/label-05.png"
                let msg = e('.msg')
                msg.innerHTML = 'You win !'
                myAlert()
            }
        }

        const myAlert = () => {
            let modal = e('#modal')
            modal.classList.remove('hidden')
            let time = e('.time')
            time.innerHTML = 0
            clearInterval(timer)
            let play = e('.play')
            bindEvent(play, 'click', function(event) {
                resetGame()
            })
        }
        //处理十位数时间
        const dealTime1 = (time) => {
            if (time < 10) {
                return `0${time}`
            } else {
                return `${time}`
            }
        }

        //处理00:00时间
        const dealTime = (time) => {
            let minute = parseInt(time / 60)
            let second = parseInt(time % 60)
            return `${dealTime1(minute)}:${dealTime1(second)}`
        }

        const start = function() {
            let square = createSquare()
            renderSquare(square)
            bindStart()
        }

        const __main = function() {
            start()
        }

        __main()
    </script>
</body>
</html>